<template>
<uni-shadow-root class="partials-productList-ticketOneColumn-index"><template name="ticketOneColumn">

  <block v-if="relateBean.length != 0">
    <view v-for="(result,index) in (relateBean)" :key="result.index" class="ticket_one_column_items2" v-if="index<jsonData.count" :data-info="result" @click="tolinkUrl">
      <image mode="aspectFill" :src="(result.imagePath)+'?x-oss-process=style/preview'"></image>
      <view class="left_box">
        <view class="ticket_one_column_items2_view1">
          
          <view class="discount" v-if="result.discount" :style="'background:'+(defaultColor)+';box-shadow:2rpx 2rpx 14rpx '+(defaultColor)">
            <text style="font-size:28rpx;font-weight: bold;">{{result.discount}}</text>
            <text style="font-size:20rpx;">折起</text>
          </view>
          <text class="ticket_one_column_name">{{result.name}}</text>
          <view class="location_name">
            <text style="margin-bottom:6rpx" class="ticket_one_column_time">{{result.readyTimeStr}}</text>
            <text v-if="result.longitude>0">{{result.location}}</text>
          </view>
          
          <view class="sale_item" :style="'border:1rpx solid '+(defaultColor)" v-if="result.itemSpecialSaleType!=0">
            <view class="sale_item_title" :style="'background:'+(defaultColor)">
              <text v-if="result.itemSpecialSaleType==1">满减</text>
              <text v-if="result.itemSpecialSaleType==2">买赠</text>
              <text v-if="result.itemSpecialSaleType==3">限购</text>
              <text v-if="result.itemSpecialSaleType==4">日限购</text>
              <text v-if="result.itemSpecialSaleType==5">周限购</text>
              <text v-if="result.itemSpecialSaleType==6">月限购</text>
              <text v-if="result.itemSpecialSaleType==7">活动限购</text>
              <text v-if="result.itemSpecialSaleType==8">会员特卖</text>
            </view>
            <view class="sale_item_value" v-if="result.itemSpecialSaleType==1" :style="'color:'+(defaultColor)">
              满<text>{{result.itemSpecialSaleValue1}}元</text>减<text>{{result.itemSpecialSaleValue2}}元</text>
            </view>
            <view class="sale_item_value" v-if="result.itemSpecialSaleType==2" :style="'color:'+(defaultColor)">
              买<text>{{result.itemSpecialSaleValue1}}</text>赠<text>{{result.itemSpecialSaleValue2}}</text>
            </view>
            <view class="sale_item_value" v-if="result.itemSpecialSaleType==3" :style="'color:'+(defaultColor)">
              限购<text>{{result.itemSpecialSaleValue1}}件</text>
            </view>
          </view>
          <scroll-view class="tags_content" scroll-x v-else>
            <text v-for="(tags,index) in (result.tagArray)" :key="tags.index" class="tags_item" :style="'color:'+(defaultColor)" v-if="result.tagArray">{{tags}}</text>
          </scroll-view>
          <view class="ticket_one_column_price">
            <text class="price" v-if="result.promotion>0">￥{{result.promotionPrice}}</text>
            <text class="price" v-else>￥{{result.price}}</text>
            <text class="price" v-if="result.maxPrice>result.price">-{{result.maxPrice}}</text>
            <text v-if="result.unitShow" class="unitShow">/{{result.unitShow}}</text>
            <text class="tag_price">元起</text>
            
            
          </view>
        </view>
        <text class="description" v-if="result.description">"{{result.description}}"</text>
      </view>
      <view class="to_car" v-if="jsonData.showCard==1" @click.stop.prevent="readyAddCar" :data-product="result">
        <text>加入购物车</text>
      </view>
    </view>
  </block>
    <block v-else>
      <view class="noproduct">
        <image mode="widthFix" src="/images/icons/no-product.png"></image>
        <text>没有相关产品</text>
      </view>
    </block>

</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/productList/ticketOneColumn/index'

Component({})

export default global['__wxComponents']['partials/productList/ticketOneColumn/index']
</script>
<style platform="mp-weixin">
.tags_content::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
display:none ;
}
/*没有相关商品  */
.noproduct{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.noproduct image{
  width: 150rpx;
  height: 150rpx;
  margin: 0 auto;
}
.noproduct text{
  font-size: 30rpx;
}
.ListDataContainer{
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ddd;
  font-size: 1em;
}
.ListDataItem{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.8em;
  height: 6em;
  border-radius: 0.4em;
  margin-bottom: 0.8em;
  background: #fff;
}
.ListDataItemWord{
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  margin-left:10px;
}
.ListDataItemWordName{
  height: 70rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  font-size: 26rpx;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}
.ListDataItemWord .word2 {
  font-size: 30rpx;
  color: red;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.Box{
  width: 100%;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 50rpx;
}
.Box text{
  font-size: 30rpx;
  display: block;
  line-height: 50rpx;
  color: red;
}
.BoxRed{
  width: 100rpx;
  height: 40rpx;
  border-radius: 20rpx;
  text-align: center;
}
.Box .BoxRed text{
  font-size: 26rpx;
  display: block;
  line-height: 40rpx;
  margin-left: 0rpx;
}
.ListDataItemImage{
  width: 30%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.2em;
}
.ListDataItemImage image{
  width: 100%;
  height: 100%;
}
.ticket_one_column_items2{
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  min-height:120rpx; 
  position: relative;
}
.ticket_one_column_items2 image{
  width: 205rpx;
  height: 280rpx;
  border-radius:0rpx;
}
.ticket_one_column_items2 .ticket_one_column_items2_view1{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 20rpx;
  min-height:280rpx;
  width:470rpx;
  position: relative;
}
.ticket_one_column_items2_view1 .tags_content{
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x:hidden;
  width:100%;
  height:60rpx;
  white-space: nowrap;
  margin:10rpx 0;
}
.ticket_one_column_items2 .location_name{
  color: #555;
  display: flex;
  flex-direction: column;
  font-size: 26rpx;
  margin-top:16rpx;
}
.left_box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ticket_one_column_items2 .description{
  color: #999;
  font-size: 28rpx;
  margin: 30rpx 0 0 20rpx;
}
.ticket_one_column_items2 .location_name text{
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap; 
  width:100%;
}
.ticket_one_column_name{
  color: #555;
  font-size: 32rpx;
  font-weight: bold;
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap; 
  width:100%;
}
.ticket_one_column_time{
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap; 
  width:100%;
}
.ticket_one_column_price{
  margin-left: -6rpx;
  font-size: 38rpx;
  color: #ff0000;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.ticket_one_column_items2 .tags_item{
  border: 2rpx solid #eee;
  padding: 2rpx 12rpx;
  font-size: 22rpx;
  color: #888;
  margin-right: 10rpx;
  border-radius: 10rpx;
  white-space:nowrap;
  box-sizing: content-box;
  display:inline-block;
}
.ticket_one_column_items2 .unitShow{
  color:#bbb;
  font-size:24rpx;
  margin-left:4rpx;
  letter-spacing:4rpx;
}
.ticket_one_column_items2 .tag_price{
  text-decoration:none;
  font-size: 24rpx;
  color:#bbb;
  margin-left: 6rpx;
}
.ticket_one_column_items2 .price{
  font-size: 40rpx;
  height:38rpx;
  line-height:38rpx;
  font-weight: bold;
}
.to_car{
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  bottom: 20rpx;
  right: 26rpx;
  border-radius: 24rpx;
  font-size: 20rpx;
  border: 1rpx solid #ff0000;
  color: #ff0000;
  padding: 6rpx 18rpx;
}
.ticket_one_column_items2 .sale_item{
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 20rpx;
  margin:20rpx 0;
}
.ticket_one_column_items2 .sale_item_title{
  color: #fff;
  padding:4rpx 6rpx;
}
.ticket_one_column_items2 .sale_item_value{
  padding:4rpx 6rpx;
  margin-left:10rpx;
}
.ticket_one_column_items2 .tags_item {
    border:none;
    background: #f8f8f8;
    padding:6rpx 12rpx;
    font-size:24rpx;
    margin-right:10rpx;
    border-radius:6rpx;
    white-space:nowrap;
    box-sizing:content-box;
    display:inline-block;
}
.discount{
  position: absolute;
  right: 10rpx;
  top: 50%;
  display: flex;
  flex-direction: column;
  border-radius: 90rpx;
  padding: 10rpx;
  color: #fff;
  align-items: center;
  width:90rpx;
  box-sizing:border-box;
  height:90rpx;
  margin-top: -50rpx;
  box-shadow: 1rpx 1rpx 1rpx #ddd;
}
</style>